<template>
  <div class="page">
    <!--直播间数据统计-->
    <el-card class="card">
      <div class="card-title">直播间数据统计</div>
      <el-divider></el-divider>
      <table class="card-content">
        <tr class="tr" v-for="(item,index) in dataStatistics">
          <td class="td" v-for="i in item" style="width:33.33%">
            <div class="content-item">
              <div class="item-label"><div class="label-text">{{ i.label }}</div></div>
              <div class="item-data">
                {{ i.data }}
              </div>
            </div>
          </td>
        </tr>
      </table>
    </el-card>

    <!--数据可视化-->
    <el-card class="card">
      <div class="card-title">
        <el-radio-group v-model="tabPosition">
          <el-radio-button label="sum">总观看人数</el-radio-button>
          <el-radio-button label="online">在线人数</el-radio-button>
          <el-radio-button label="clickNum">商品点击次数</el-radio-button>
        </el-radio-group>
      </div>
      <el-divider></el-divider>
      <div class="chart">
        <div v-show="tabPosition==='sum'" class="chart-item">
          <div ref="sum" style="width:80vw;height:430px;"></div>
        </div>
        <div v-show="tabPosition==='online'" class="chart-item">
          <div ref="online" style="width:80vw;height:430px;"></div>
        </div>
        <div v-show="tabPosition==='clickNum'" class="chart-item">
          <div ref="clickNum" style="width:80vw;height:430px;"></div>
        </div>
      </div>
    </el-card>

    <!--商品热度分析-->
    <el-card class="card">
      <div class="card-title">商品热度分析</div>
      <el-divider></el-divider>
      <div class="el-table">
        <el-table :data="heatData" stripe>
          <el-table-column prop="name" label="商品名称" align="center"></el-table-column>
          <el-table-column prop="type" label="类型" align="center"></el-table-column>
          <el-table-column prop="price" label="价格" align="center"></el-table-column>
          <el-table-column prop="clickNumber" label="点击次数" align="center"></el-table-column>
          <el-table-column prop="clickPeopleNum" label="点击人数" align="center"></el-table-column>
        </el-table>
        <div class="pager-group">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="heat.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="heat.pageSize"
            layout="total, sizes, jumper, prev, next"
            :total="heat.total"
          ></el-pagination>
        </div>
      </div>
    </el-card>

    <!--用户分析-->
    <el-card class="card">
      <div class="card-title">用户分析</div>
      <el-divider></el-divider>
      <div class="el-table">
        <el-table :data="userAnalysisData" stripe>
          <el-table-column prop="nickname" label="用户昵称" align="center"></el-table-column>
          <el-table-column prop="firstTime" label="首次进入时间" align="center"></el-table-column>
          <el-table-column prop="visitsNumber" label="访问次数" align="center"></el-table-column>
          <el-table-column prop="goodsViewedNum" label="商品浏览次数" align="center"></el-table-column>
          <el-table-column prop="duration" label="观看时长" align="center"></el-table-column>
          <el-table-column prop="shareNumber" label="分享次数" align="center"></el-table-column>
        </el-table>
        <div class="pager-group">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="userAnalysis.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="userAnalysis.pageSize"
            layout="total, sizes, jumper, prev, next"
            :total="userAnalysis.total"
          ></el-pagination>
        </div>
      </div>
    </el-card>

    <!--观看流水-->
    <el-card class="card">
      <div class="card-title">观看流水</div>
      <el-divider></el-divider>
      <div class="el-table">
        <el-table :data="viewRecordData" stripe>
          <el-table-column prop="nickname" label="用户昵称" align="center"></el-table-column>
          <el-table-column prop="enterTime" label="进入时间" align="center"></el-table-column>
          <el-table-column prop="leaveTime" label="离开时间" align="center"></el-table-column>
          <el-table-column prop="duration" label="本次观看时长(min)" align="center"></el-table-column>
        </el-table>
        <div class="pager-group">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="heat.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="heat.pageSize"
            layout="total, sizes, jumper, prev, next"
            :total="heat.total"
          ></el-pagination>
        </div>
      </div>
    </el-card>

    <!--地区分布-->
    <el-card class="card">
      <div class="card-title">地区分布</div>
      <el-divider></el-divider>
      <div class="regional-content">
        <div class="left">
          <div class="chart">
            <div class="chart-item">
              <div ref="region" style="width:90vw;height:500px;"></div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="right-title">地区排名（观看人数）</div>
          <div class="el-table">
            <el-table :data="regionalData" stripe>
              <el-table-column prop="name" label="地区" align="center"></el-table-column>
              <el-table-column prop="value" label="观看人数" align="center"></el-table-column>
              <el-table-column prop="ranking" label="排名" align="center"></el-table-column>
            </el-table>
            <div class="pager-group">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="regional.page"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="regional.pageSize"
                layout="total, sizes, jumper, prev, next"
                :total="regional.total"
              ></el-pagination>
            </div>
          </div>
        </div>
      </div>
    </el-card>
    <!--观看时长分布-->
    <el-card class="card">
      <div class="card-title">观看时长分布</div>
      <el-divider></el-divider>
      <div class="chart">
        <div class="chart-item">
          <div ref="watchTime" style="width:80vw;height:430px;"></div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "dataStatistics",
  data(){
    return {
      id:'',
      dataStatistics: [
        [
          {label: "总访问人次", data: '664154'},
          {label: "总访问人数", data: '543421'},
          {label: "人均观看时长(min)", data: '28'}
        ],
        [
          {label: "最高在线人数", data: '128223'},
          {label: "分享次数", data: '115487'},
          {label: "点赞次数", data: '507421'}
        ],
      ],
      tabPosition: 'sum',//所选的图表标签
      //热度分析数据
      heatData: [
        {name:'纯棉布料',type:'SAAS商城商品',price:'19.9',clickNumber:'165659',clickPeopleNum:'89541'},
        {name:'牛仔裤',type:'SAAS商城商品',price:'68',clickNumber:'89541',clickPeopleNum:'78954'},
        {name:'帆布鞋',type:'外部商品',price:'',clickNumber:'541987',clickPeopleNum:'498452'},
        {name:'卫衣',type:'外部商品',price:'',clickNumber:'198546',clickPeopleNum:'125689'},
        {name:'纯棉衬衫',type:'外部商品',price:'',clickNumber:'265984',clickPeopleNum:'168564'},
      ],
      //热度分析分页
      heat: {
        page: 1,
        pageSize: 0,
        total: 100,
      },
      //用户分析数据
      userAnalysisData:[
        {nickname:'张飞',firstTime:'2022年3月1日 12:08:16',visitsNumber:'6',goodsViewedNum:'28',duration:'48',shareNumber:'2'},
        {nickname:'刘备',firstTime:'2022年3月9日 14:08:16',visitsNumber:'4',goodsViewedNum:'15',duration:'26',shareNumber:'6'},
        {nickname:'关羽',firstTime:'2022年3月10日 18:08:16',visitsNumber:'7',goodsViewedNum:'35',duration:'64',shareNumber:'8'},
        {nickname:'诸葛亮',firstTime:'2022年3月18日 11:08:16',visitsNumber:'2',goodsViewedNum:'16',duration:'19',shareNumber:'1'},
        {nickname:'曹操',firstTime:'2022年3月21日 13:08:16',visitsNumber:'8',goodsViewedNum:'34',duration:'168',shareNumber:'9'},
      ],
      //用户分析分页
      userAnalysis:{
        page: 1,
        pageSize: 0,
        total: 100,
      },
      //观看流水数据
      viewRecordData:[
        {nickname:'刘备',enterTime:'2022年3月1日 12:01:20',leaveTime:'2022年3月1日 12:31:20',duration:'30'},
        {nickname:'关羽',enterTime:'2022年3月2日 12:01:20',leaveTime:'2022年3月2日 12:32:20',duration:'31'},
        {nickname:'张飞',enterTime:'2022年3月3日 12:01:20',leaveTime:'2022年3月3日 12:33:20',duration:'32'},
        {nickname:'赵云',enterTime:'2022年3月4日 12:01:20',leaveTime:'2022年3月4日 12:34:20',duration:'33'},
      ],
      //观看流水分页
      viewRecord:{
        page: 1,
        pageSize: 0,
        total: 100,
      },
      //地区排名数据
      regionalData:[
        {value:865451,name:'广东',ranking:'1'},
        {value:654875,name:'北京',ranking:'2'},
        {value:545652,name:'上海',ranking:'3'},
        {value:268485,name:'湖南',ranking:'4'},
        {value:265485,name:'湖北',ranking:'5'},
      ],
      regional:{//地区排名分页
        page: 1,
        pageSize: 0,
        total: 100,
      },
      //图表数据
      chartData1:{
        y:[309,101248,92448,284541,255412,498451,702654,891323,1008888],
        x:['0-15','15-30','30-45','45-60','60-75','75-90','90-105','105-120','>120']
      },
      chartData2:{
        y:[1654,195984,382448,284541,495412,548451,502654,891323,1281254],
        x:['0-15','15-30','30-45','45-60','60-75','75-90','90-105','105-120','>120']
      },
      chartData3:{
        y:[85421,21248,192448,84541,155412,498451,72654,291323,388888],
        x:['0-15','15-30','30-45','45-60','60-75','75-90','90-105','105-120','>120']
      }
    }
  },
  mounted() {
    this.id = this.$route.params.id
    console.log(this.id)

    //将id进行存储
    sessionStorage.setItem('consoleId',this.id)

    //通过id请求数据
    // get({id: this.$route.params.id}, res=> {
    //   this.showInfo = res
    // })

    this.lineChart(this.$refs[this.tabPosition],this.chartData1)
    this.pieChart(this.$refs.region)
    this.lineChart(this.$refs.watchTime,this.chartData2,'观看时间(分钟)','人数')
  },
  watch:{
    tabPosition(newVal){
      var chartData = ''
      if(newVal=='sum'){
        chartData = this.chartData1
      }else if(newVal=='online'){
        chartData = this.chartData2
      }else if(newVal=='clickNum'){
        chartData = this.chartData3
      }
      let chart = this.$refs[newVal]
      this.lineChart(chart,chartData)
    }
  },
  methods:{
    //折线图
    lineChart(chart,chartData,xName,yName){
      if (chart) {
        const myChart = this.$echarts.init(chart)
        const option = {
          color: ["#3398DB"],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            }
          },
          grid: {},
          xAxis: [{
            type: "category",
            //轴名称
            name:xName,
            //轴名称显示位置
            nameLocation: "middle",
            //轴名称距离轴的位置
            nameTextStyle: {
              lineHeight: 80
            },
            data: chartData.x
          }],
          yAxis: [{
            type: "value",
            //轴名称
            name:yName,
            //轴名称显示位置
            nameLocation: "middle",
            //轴名称距离轴的位置
            nameTextStyle: {
              lineHeight: 130
            },
          }],
          series: [{
            name: "直接访问",
            type: "line",
            data:  chartData.y
          }]
        }
        myChart.setOption(option)
        window.addEventListener("resize", function() {
          myChart.resize()
        })
      }
      this.$on('hook:destroyed',()=>{
        window.removeEventListener("resize", function() {
          myChart.resize();
        });
      })
    },

    //饼图
    pieChart(chart){
      if (chart) {
        const myChart = this.$echarts.init(chart)
        const option = {
          // title: {
          //   text: 'Referer of a Website',
          //   subtext: 'Fake Data',
          //   left: 'center'
          // },
          tooltip: {
            trigger: 'item'
          },
          // legend: {
          //   orient: 'vertical',
          //   left: 'left'
          // },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '50%',
              data: this.regionalData,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        myChart.setOption(option)
        window.addEventListener("resize", function() {
          myChart.resize()
        })
      }
      this.$on('hook:destroyed',()=>{
        window.removeEventListener("resize", function() {
          myChart.resize();
        });
      })
    },

    //页条数改变触发事件
    handleSizeChange(){

    },
    //页码改变触发事件
    handleCurrentChange(){

    },
  },

}
</script>

<style lang="less" scoped>
.page{
  width:100%;

  .card{
    margin-bottom: 25px;

    .card-content {
      width: 100%;
      border: 1px solid #ededed;
      border-collapse: collapse;
    }

    .tr {
      height: 80px;

      .td {
        border: 1px solid #ededed;
        min-height: 80px;
        overflow: hidden;

        .content-item {
          display: flex;
          min-height: 80px;

          .item-label {
            width: 120px;
            border-right: 1px solid #ededed;
            background-color: #f2f2f2;
            min-heigth: 80px;
            text-align: center;

            .label-text{
              height:100%;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }

          .item-data {
            padding: 10px;
            min-height:80px;
            display: flex;
            align-items: center;
            flex:1;
            word-break:break-all;
          }
        }
      }
    }

    .pager-group{
      width:100%;
      margin: 20px 0;
    }

    .regional-content{
      display:flex;

      .left{
        height:400px;
        width:50%;
        border-right: 1px solid rgb(220, 223, 230);
      }

      .right{
        width: 50%;
        height:400px;
        padding:10px 50px;

        .right-title{
          font-size: 20px;
          font-weight: bold;
          margin-bottom: 20px;
        }
      }
    }

    .chart-item{
      display:flex;
      justify-content: center;

      /deep/ canvas{
        top: -50px !important;
      }
    }
  }
}

</style>
